@charset "UTF-8";

// disable plotly notifier
div.plotly-notifier {
  visibility: hidden;
}

.theme_DARK {
  --body-color: white;
  --text-color: #B5B6C0;

  .rangeslider-mask-min, .rangeslider-mask-max {
    fill: #161617 !important;
    fill-opacity: 1 !important;
  }

  .chart-config-form {
    .more-options {
      section {
        background-color: #171717;
      }
    }
  }

  .button-point {
    background-color: black;
    border: 1px solid #465282;
  }

  .button-selected {
    color: #8BA2FF;
    background-color: #292F47;
  }
}

.rangeslider-handle-min, .rangeslider-handle-max {
  height: 0;
}

.theme_LIGHT {
  --body-color: black;
  --text-color: #527298;

  .rangeslider-mask-min, .rangeslider-mask-max {
    fill: #F6F7F9 !important;
    fill-opacity: 1 !important;
  }

  .chart-config-form {
    .more-options {
      section {
        background-color: #F6F6F8;
      }
    }
  }

  .new-button {
    color: #343741;
  }

  .button-point {
    border: 1px solid #243DAC;
  }

  .button-selected {
    color: #3163D8;
    background-color: #D7E3FA;
  }
}

body {
  color: var(--body-color);
  overflow: hidden;
}

* div,
* span {
  font-family: 'Graphik', sans-serif !important;
}

.responseFail {
  color: red;
  padding: 12px !important;
  font-family: monospace !important;
}


.y-axis-config  {
  fieldset {
    width: 100%;
  }
}

.chart-config-form {
  width: 50%;
  min-width: fit-content;
  display: flex;
  flex-direction: column;

  .chart-form-top {
    display: flex;
    justify-content: center;
    & > :not(:first-child) {
      margin-left: 36px;
    }
  }

  .chart-form-accordion {
    margin-top: 20px;

    .more-options {
      width: 100%;
      section {
        display: flex;
        padding: 15px;
        justify-content: space-between;
        gap: 10px;

        &:not(:first-child) {
          margin-top: 10px;
        }

        .right-y-axis {
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: 100%;

          .switch-wrapper {
            width: 100%;
          }
        }

        .y-axis-2 {
          width: 100%;
          .y-axis-2-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 13px;
            gap: 5px;
          }
        }
      }
    }
  }
}

.zoom-helper-text {
  display: flex;
  justify-content: flex-end;
  padding-right: 3em !important;
  padding-top: 0.3em !important;
  color: var(--text-color);
}


.config-form-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}


.theme_DARK {
    .button-point {
        background-color: black;
        border: 1px solid #465282;
    }

    .button-selected {
        color: #8BA2FF;
        background-color: #292F47;
    }
}

.theme_LIGHT {
    .new-button {
        color: #343741;
    }

    .button-point {
        border: 1px solid #243DAC;
    }

    .button-selected {
        color: #3163D8;
        background-color: #D7E3FA;
    }
}

.new-button {
    box-shadow: none!important;
    border-radius: 2px;
    cursor: pointer;
    height: 32px;
    overflow: visible;
    display: flex;

    div {
        font-size: 13px;
        padding: 0px;
        font-weight: normal;
        height: 30px;
        min-width: 68px;
    }

    div:first-child {
        border-radius: 4px;
        border-right: 0px;
        border-top-right-radius: 0px;
        border-bottom-right-radius: 0px;
    }

    div:last-child {
        border-radius: 4px;
        border-top-left-radius: 0px;
        border-bottom-left-radius: 0px;
    }

    .button-point {
        text-transform: capitalize;
        text-align: center;
        padding: 6px;
    }
}
